<template>
    <div class="login">
      <div class="logo">
          <img src="/img/logo.png" alt="">
          <h3>客户关系管理系统</h3>
          <p>Custmer Authorization Gkjhgfhb</p>
          <input type="text" placeholder="请输入用户名" v-model="ruleForm.name"><br>
          <input type="text" placeholder="请输入密码" v-model="ruleForm.pwd">
          <br>
          <button @click="login">登录</button>
      </div>
      <p>网景科技有限公司 版权所有 违者必究</p>
      <p>Canvas Programe shfg hsaak gsfbfbik</p>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { getLogin } from '../api/index';
  import router from '../router/index';
  const ruleForm = reactive({
    name: '',
    pwd: '',
  })
  const login = async () => {
      if(ruleForm.name==''){
          alert('用户名不能为空')
      }else if(ruleForm.pwd==''){
          alert('密码不能为空')
      }else{
          let data=await getLogin(ruleForm);
          console.log(data);
          let {code,token}:any=data
          if(code==200){
              localStorage.setItem('token',token)
              router.push('/layout/home')
          }else{
              alert('用户名或密码输入错误')
          }
      }
  }
  </script>
  
  <style lang="scss">
  .login{
      width: 100vw;
      height: 100vh;
      background: url('/img/bgcimg.png');
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .logo{
          width: 360px;
          height: 460px;
          text-align: center;
          background-color: #fff;
      }
  }
  </style>
  